<template>
  <div>
    <div class="title">{{ img.moduleTitle }}</div>
    <!-- 爆款床品 -->
    <div class="recommend">
      <img
        @click="detail(item.jumpUrl)"
        v-for="(item, index) in img.moduleLinkData"
        :key="index"
        :src="item.imgUrl"
        alt=""
      />
    </div>
    <div class="title">{{ time.moduleTitle }}</div>
    <div class="endtime">
      距结束还剩<span>{{ d }}</span
      >天<span>{{ h }}</span
      >:<span>{{ m }}</span
      >:<span>{{ s }}</span>
    </div>
    <!-- 限时优选 -->
    <div class="time">
      <div>
        <dl
          @click="goods(item.goodsId)"
          v-for="item in time.moduleLinkData[0].linkData.frontGoodsList"
          :key="item.goodsId"
        >
          <dt>
            <img :src="item.goodsImgUrl" alt="" />
          </dt>
          <dd>
            <p>{{ item.goodsName }}</p>
            <p>
              <span>¥{{ item.minGoodsPrice }}</span>
              <span>{{ item.discountTag[0] }}</span>
            </p>
            <p>
              折后¥<span>{{ item.goodsDiscountPrice }}</span
              ><span>起</span>
            </p>
          </dd>
        </dl>
      </div>
    </div>
    <div class="title">{{ yaduo.moduleTitle }}</div>
    <!-- 亚朵生活-控油清爽洗护沐系列 -->
    <div class="yaduo">
      <img
        v-for="item in yaduo.moduleLinkData"
        :key="item.subModuleId"
        :src="item.imgUrl"
        alt=""
      />
    </div>
    <div class="title">{{ product.moduleTitle }}</div>
    <!-- 新品推荐 -->
    <div class="yaduo">
      <img
        v-for="item in product.moduleLinkData"
        :key="item.subModuleId"
        :src="item.imgUrl"
        alt=""
      />
    </div>
    <div class="title">{{ today.moduleTitle }}</div>
    <!-- 今日推荐好物 -->
    <div class="yaduo">
      <img
        v-for="item in today.moduleLinkData"
        :key="item.subModuleId"
        :src="item.imgUrl"
        alt=""
      />
    </div>
    <div class="title">{{ essential.moduleTitle }}</div>
    <!-- 差旅必备好物 -->
    <div class="essential">
      <div>
        <img
          v-for="item in essential.moduleLinkData"
          :key="item.subModuleId"
          :src="item.imgUrl"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getCenter } from "../server/index";
export default {
  data() {
    return {
      img: [],
      time: [],
      yaduo: [],
      product: [],
      today: [],
      essential: [],
      endTime: 0,
      d: 0,
      h: 0,
      m: 0,
      s: 0,
    };
  },
  created() {
    getCenter(
      "xbu/front/index/getNewIndexList?activitySource=xbuXcx&appVer=1.0.0&channelId=10001&platType=14&groupGoodsSize=12"
    ).then((ok) => {
      if (ok.retcode == 0) {
        this.img = ok.result[0];
        this.time = ok.result[1];
        this.yaduo = ok.result[2];
        this.product = ok.result[3];
        this.today = ok.result[4];
        this.essential = ok.result[5];
        this.endTime = +new Date(
          ok.result[1].moduleLinkData[0].linkData.endTime
        );
      }
    });
    setInterval(() => {
      this.fun();
    }, 1000);
  },
  methods: {
    // 倒计时
    fun() {
      let time = +new Date();
      let leftTime = this.endTime - time;
      let d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
      let h = Math.floor((leftTime / 1000 / 60 / 60) % 24);
      let m = Math.floor((leftTime / 1000 / 60) % 60);
      let s = Math.floor((leftTime / 1000) % 60);
      this.d = d;
      this.h = h < 10 ? "0" + h : h;
      this.m = m < 10 ? "0" + m : m;
      this.s = s < 10 ? "0" + s : s;
    },
    detail(path) {
      console.log(path);
      
      uni.navigateTo({
        url: path,
      });
    },
  goods(id) {
     uni.navigateTo({
        url: `/subpacks/mall/goodsDetail/goodsDetail?id=${id}`,
      });
  },
  },
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 35rpx;
  text-align: center;
  padding: 50rpx 0 25rpx 0;
}
.recommend {
  width: 100%;
  height: 460rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  position: relative;

  img:nth-child(1) {
    width: 350rpx;
    height: 460rpx;
  }
  img:nth-child(2),
  img:nth-child(3) {
    width: 350rpx;
    height: 220rpx;
  }
  img:nth-child(3) {
    position: absolute;
    bottom: 0;
    right: 14rpx;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
.endtime {
  text-align: center;
  margin-bottom: 40rpx;
  font-size: 25rpx;
  span {
    display: inline-block;
    background: linear-gradient(130deg, #fae3c7, #d3a267);
    color: #fff;
    padding: 8rpx;
    margin: 0 8rpx;
  }
}
.time {
  width: 92%;
  margin: 0 auto;
  height: 500rpx;
  overflow-x: scroll;
  > div {
    width: 1460rpx;
    display: flex;
    dl {
      width: 300rpx;
      overflow: hidden;
      margin-right: 15rpx;
      border: solid 1rpx #eee;
      dt {
        width: 100%;
        height: 280rpx;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    dd {
      width: 90%;
      margin: 0 auto;
      > p:nth-child(1) {
        font-size: 25rpx;
        margin: 10rpx 0;
        width: 100%;
        height: 65rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      > p:nth-child(2) {
        font-size: 23rpx;
        > span:nth-child(1) {
          list-style: georgian;
          text-decoration: line-through;
          color: #ccc;
        }
        > span:nth-child(2) {
          display: inline-block;
          padding: 5rpx;
          background: #f0d9bd;
          margin-left: 20rpx;
        }
      }
      > p:nth-child(3) {
        font-size: 22rpx;
        span:nth-child(1) {
          font-weight: 700;
        }
        span:nth-child(2) {
          font-size: 18rpx;
          color: #ccc;
        }
      }
    }
  }
}
.yaduo {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  img:nth-child(1) {
    width: 100%;
    height: 400rpx;
    margin-bottom: 20rpx;
  }
  img:nth-child(2),
  img:nth-child(3),
  img:nth-child(4) {
    width: 30%;
    height: 300rpx;
  }
}
.essential {
  width: 92%;
  margin: 0 auto;
  height: 500rpx;
  overflow-x: scroll;
  > div {
    width: 1500rpx;
    height: 100%;
    display: flex;
    img {
      width: 300rpx;
      height: 100%;
    }
  }
}
</style>